"use strict";
import * as React from 'react';
import { commonStyles } from "../../assets/styles/common";
const FontAwesome = require('react-native-vector-icons/FontAwesome').default;
import AuthHeader from "../../component/AuthHeader";
import MyText from "../../component/MyText";
import Colors from "../../assets/styles/Colors";
const { Actions } = require("react-native-router-flux");
import Validator from "../../utils/Validator";
import { toastValidateError } from "../../utils/tools";
const { View, ScrollView, TouchableOpacity } = require('react-native');
const { connect } = require('react-redux');
const { createForm } = require('rc-form');
const { List, InputItem, Button, Flex } = require('antd-mobile');
const { KeyboardAwareScrollView } = require('react-native-keyboard-aware-scroll-view');
class SignInPage extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.signIn = () => {
            const { dispatch, form } = this.props;
            form.validateFields((error, value) => {
                if (!error) {
                    let { phone, password } = form.getFieldsValue();
                    phone = phone.replace(/ /g, '');
                    dispatch({
                        type: 'auth/signIn',
                        payload: { phone, password }
                    });
                }
                else {
                    toastValidateError(error);
                }
            });
        };
        this.validator = ({ field }, value, callBack) => {
            const errors = this.state.errors;
            errors[field] = true;
            if (field === 'phone') {
                if (value) {
                    errors[field] = !Validator.validator(value.replace(/ /g, ''), Validator.phoneReg);
                }
                if (errors[field]) {
                    callBack('手机号不合法');
                }
                else {
                    callBack();
                }
                this.setState({ errors });
            }
            else if (field === 'password') {
                errors[field] = !(value && value.length >= 6);
                if (errors[field]) {
                    callBack('密码不合法');
                }
                else {
                    callBack();
                }
                this.setState({ errors });
            }
        };
        this.state = {
            errors: {
                phone: false,
                password: false,
            }
        };
    }
    componentDidMount() {
    }
    render() {
        const { getFieldProps } = this.props.form;
        return (<View style={commonStyles.container}>
                <KeyboardAwareScrollView>
                    <List renderHeader={<AuthHeader text={'轻生活商家端'}/>}>
                        <InputItem {...getFieldProps('phone', {
            initialValue: '15071308455',
            rules: [
                { required: true, message: '手机号未填写' },
                { validator: this.validator.bind(this) }
            ]
        })} placeholder="输入手机号" labelNumber={2} type="phone" error={this.state.errors.phone} clear>
                            <FontAwesome name="mobile" size={26} color={Colors.Primary}/>

                        </InputItem>
                        <InputItem {...getFieldProps('password', {
            initialValue: '123456',
            rules: [
                { required: true, message: '密码未填写' },
                { validator: this.validator.bind(this) },
            ]
        })} placeholder="输入密码" labelNumber={2} type="password" error={this.state.errors.password} clear>
                            <FontAwesome name="lock" size={20} color={Colors.Primary}/>
                        </InputItem>

                    </List>

                    <View style={{ paddingVertical: 10, paddingHorizontal: 20 }}>
                        <Button type="primary" title="登录" onClick={this.signIn} style={{ height: 40, marginBottom: 20 }}>登录</Button>

                        <Flex justify="between">
                            <TouchableOpacity onPress={Actions.signUp}>
                                <MyText>注册</MyText>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={Actions.findPwd}>
                                <MyText>忘记密码</MyText>
                            </TouchableOpacity>
                        </Flex>
                    </View>
                </KeyboardAwareScrollView>
            </View>);
    }
}
const Wrapper = createForm()(SignInPage);
export default connect(({ auth }) => ({ auth }))(Wrapper);
